<style>
  .collection-for-banner {
    position: relative;
  }
  .collection-for-banner__text-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .collection-for-banner__title {
    color: #FFF;
    font-family: Montserrat;
    font-size: 48px;
    font-style: normal;
    font-weight: 700;
    line-height: 180%; /* 86.4px */
    letter-spacing: -1.44px;
    margin: 0;
  }
  .collection-for-banner__description {
    color: #FFF;
    /* 24px regular 32px */
    font-family: Montserrat;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px;
    text-align: center;
  }
</style>
<div class="collection-for-banner gradient">
  <div class="collection-for-banner__inner">
    <div class="collection-for-banner__image-container pc-banner image-with-text__media image-with-text__media--{{ section.settings.height }} {% if section.settings.image != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}"
      {% if section.settings.image != blank %} style="padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 | floor }}%;"{% endif %}
    >
      <img
        srcset="{%- if section.settings.image.width >= 165 -%}{{ section.settings.image | image_url: width: 165 }} 165w,{%- endif -%}
          {%- if section.settings.image.width >= 360 -%}{{ section.settings.image | image_url: width: 360 }} 360w,{%- endif -%}
          {%- if section.settings.image.width >= 535 -%}{{ section.settings.image | image_url: width: 535 }} 535w,{%- endif -%}
          {%- if section.settings.image.width >= 750 -%}{{ section.settings.image | image_url: width: 750 }} 750w,{%- endif -%}
          {%- if section.settings.image.width >= 1070 -%}{{ section.settings.image | image_url: width: 1070 }} 1070w,{%- endif -%}
          {%- if section.settings.image.width >= 1500 -%}{{ section.settings.image | image_url: width: 1500 }} 1500w,{%- endif -%}
          {{ section.settings.image | image_url }} {{ section.settings.image.width }}w"
        src="{{ section.settings.image | image_url: width: 1400 }}"
        alt=""
        width="{{ section.settings.image.width }}"
        height="{{ section.settings.image.height }}"
      >
    </div>
    <div class="collection-for-banner__image-container image_mobile image-with-text__media {% if section.settings.image_mobile != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}"
      {% if section.settings.image_mobile != blank %} style="padding-bottom: {{ 1 | divided_by: section.settings.image_mobile.aspect_ratio | times: 100 }}%;"{% endif %}
    >
      <img
        srcset="{%- if section.settings.image_mobile.width >= 165 -%}{{ section.settings.image_mobile | image_url: width: 165 }} 165w,{%- endif -%}
          {%- if section.settings.image_mobile.width >= 360 -%}{{ section.settings.image_mobile | image_url: width: 360 }} 360w,{%- endif -%}
          {%- if section.settings.image_mobile.width >= 535 -%}{{ section.settings.image_mobile | image_url: width: 535 }} 535w,{%- endif -%}
          {%- if section.settings.image_mobile.width >= 750 -%}{{ section.settings.image_mobile | image_url: width: 750 }} 750w,{%- endif -%}
          {%- if section.settings.image_mobile.width >= 1070 -%}{{ section.settings.image_mobile | image_url: width: 1070 }} 1070w,{%- endif -%}
          {%- if section.settings.image_mobile.width >= 1500 -%}{{ section.settings.image_mobile | image_url: width: 1500 }} 1500w,{%- endif -%}
          {{ section.settings.image_mobile | image_url }} {{ section.settings.image_mobile.width }}w"
        src="{{ section.settings.image_mobile | image_url: width: 750 }}"
        sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 2 }}px, (min-width: 750px) calc(50vw - 130px), calc(50vw - 55px)"
        alt=""
        width="{{ section.settings.image_mobile.width }}"
        height="{{ section.settings.image_mobile.height }}"
      >
    </div>
    <div class="collection-for-banner__text-wrapper">
      <h1 class="collection-for-banner__title">
        {{- section.settings.heading | escape -}}
      </h1>
      <div class="collection-for-banner__description rte">{{ section.settings.desc }}</div>
    </div>
  </div>
</div>

{% schema %}
{
  "name": "Banner For Collection",
  "tag": "section",
  "class": "section banner-for-collection",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "The Premium Electric Bikes"
    },
    {
      "type": "text",
      "id": "desc",
      "label": "Description",
      "default": "Give $60, Get 5,000 Points"
    },
    {
      "type": "image_picker",
      "id": "image",
      "label": "Banner"
    },
    {
      "type": "image_picker",
      "id": "image_mobile",
      "label": "Banner Mobile"
    }
  ],
  "presets": [
    {
      "name": "Banner For Collection"
    }
  ]
}
{% endschema %}
